<!DOCTYPE html>
<html>
 <head>
  <title>
   PixieApps: Use PixieDust to Generate UI Elements
  </title>
  <meta content="&#xA9;Copyright IBM Corporation 2018" name="copyright"/>
  <meta content="&#xA9;Copyright IBM Corporation 2018" name="DC.Rights.Owner"/>
  <meta content="&#xA9; Copyright IBM Corporation 2016, 2017, 2018" name="dcterms.rights"/>
  <meta content="2018-03-09" name="DC.date"/>
 </head>
 <body>
  <div>
   <h1>
    PixieApps: Use PixieDust to Generate UI Elements
   </h1>
   <p>
    <strong>
     What are PixieApps?
    </strong>
   </p>
   <p>
    PixieApps are Python classes used to write UI elements for your analytics, and they run directly in a Jupyter notebook.
   </p>
   <p>
    PixieApps are designed to be easy to build. Mostly, you'll only need to write HTML and CSS with some custom attributes, along with some Python for the business logic. Except in rare cases, you won't have to write JavaScript. The PixieDust JS runtime will automatically listen to key events and manage transactions to the Jupyter kernel appropriately.
   </p>
   <img alt="_images/pixieapp-chart.png" src="https://raw.githubusercontent.com/ibm-watson-data-lab/pixiedust/master/docs/_images/pixieapp-chart.png"/>
   <p>
    At its core, a PixieApp is composed of views (in the
    <a href="https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller">
     MVC
    </a>
    sense), which are HTML fragments. Each view has a route definition (a set of key/value pairs) that the PixieApp framework uses to decide when to dispatch the current transaction based on current app state. You'll find more details in the sub-topics here.
   </p>
   <p>
    <h3>
     In this PixieDust docs topic:
    </h3>
    <ul>
     <li>
      <a href="hello-world-pixieapp.html">
       Hello World PixieApp
      </a>
     </li>
     <li>
      <a href="reference-pixieapp.html">
       Configuring PixieApp Routes
      </a>
     </li>
     <li>
      <a href="html-attributes-pixieapp.html">
       Custom HTML Attributes for PixieApps
      </a>
     </li>
     <li>
      <a href="custom-elements-pixieapp.html">
       Custom Elements for PixieApps
      </a>
     </li>
     <li>
      <a href="dynamic-values-pixieapp.html">
       Dynamic Values and User Input with PixieApps
      </a>
     </li>
     <li>
      <a href="create-widget-pixieapp.html">
       Creating a PixieApp Widget to Reuse UI Elements
      </a>
     </li>
     <li>
      <a href="hello-world-data-pixieapp.html">
       Hello World PixieApp with Data
      </a>
     </li>
     <li>
      <a href="index.html">
       <em>
        Docs home for PixieDust
       </em>
      </a>
     </li>
    </ul>
   </p>
  </div>
 </body>
</html>
